<template>
  <div class="input-container">
    <!-- 重试状态提示 -->
    <div v-if="retryCount > 0" class="retry-indicator">
      <div class="retry-content">
        <div class="retry-spinner"></div>
        <span>正在重试发送... ({{ retryCount }}/3)</span>
      </div>
    </div>
    
    <!-- 错误状态提示 -->
    <div v-if="hasError && !retryCount" class="error-indicator">
      <svg class="error-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"/>
        <line x1="15" y1="9" x2="9" y2="15"/>
        <line x1="9" y1="9" x2="15" y2="15"/>
      </svg>
      <span>发送失败，请重试</span>
    </div>
    
    <div class="input-box">
      <div class="input-wrapper" :class="{ 'has-error': hasError && !retryCount }">
        <input v-model="text"
               class="input"
               type="text"
               :placeholder="getPlaceholder()"
               :disabled="sending || isThinking || retryCount > 0"
               @keyup.enter="submit"
               @focus="onFocus"
               @blur="onBlur" />
        <div class="input-actions">
          <button v-if="sending || isThinking" 
                  class="btn abort-btn"
                  @click="abort"
                  title="中断回答">
            <svg class="stop-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="6" y="6" width="12" height="12" fill="currentColor" rx="2"/>
            </svg>
          </button>
          <button v-else
                  class="btn"
                  :disabled="!text.trim() || retryCount > 0"
                  @click="submit">
            <svg class="send-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

/**
 * 输入组件
 * @prop {boolean} sending - 是否处于发送中
 * @prop {boolean} isThinking - 是否处于思考中
 * @prop {boolean} hasError - 是否有错误
 * @prop {number} retryCount - 重试次数
 * @emits send(text: string)
 * @emits abort()
 */
const props = defineProps({
  sending: { type: Boolean, default: false },
  isThinking: { type: Boolean, default: false },
  hasError: { type: Boolean, default: false },
  retryCount: { type: Number, default: 0 }
});

const emit = defineEmits(['send', 'abort']);
const text = ref('');
const isFocused = ref(false);

/**
 * 提交输入内容
 */
function submit() {
  const v = text.value.trim();
  if (!v) return;
  emit('send', v);
  text.value = '';
}

/**
 * 中断当前对话
 */
function abort() {
  emit('abort');
}

/**
 * 输入框获得焦点
 */
function onFocus() {
  isFocused.value = true;
}

/**
 * 输入框失去焦点
 */
function onBlur() {
  isFocused.value = false;
}

/**
 * 获取输入框占位符文本
 * @returns {string} 占位符文本
 */
function getPlaceholder() {
  if (props.retryCount > 0) {
    return `正在重试中... (${props.retryCount}/3)`;
  }
  if (props.sending || props.isThinking) {
    return '思考中…';
  }
  if (props.hasError) {
    return '发送失败，请重试';
  }
  return '输入消息';
}
</script>

<style scoped>
/* 重试状态指示器 */
.retry-indicator {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  color: #d97706;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.retry-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.retry-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(217, 119, 6, 0.2);
  border-top: 2px solid #d97706;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 错误状态指示器 */
.error-indicator {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  color: #dc2626;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-icon {
  flex-shrink: 0;
}

/* 错误状态下的输入框样式 */
.input-wrapper.has-error {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(254, 242, 242, 0.5);
}

.input-wrapper.has-error:hover {
  border-color: rgba(239, 68, 68, 0.4);
}

.input-wrapper.has-error:focus-within {
  border-color: #ef4444;
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.15);
}

.input-container {
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(59, 130, 246, 0.1);
  position: relative;
}

.input-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.3) 50%, transparent 100%);
}

.input-box {
  max-width: 900px;
  margin: 0 auto;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(59, 130, 246, 0.1);
  border-radius: 24px;
  padding: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
  position: relative;
  overflow: hidden;
}

.input-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 197, 253, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.input-wrapper:hover {
  border-color: rgba(59, 130, 246, 0.2);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.12);
}

.input-wrapper:hover::before {
  opacity: 1;
}

.input-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

.input-wrapper:focus-within::before {
  opacity: 1;
}

.input {
  flex: 1;
  height: 48px;
  padding: 0 20px;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #374151;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  position: relative;
  z-index: 1;
}

.input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.input:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.btn {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.btn:hover:not(:disabled)::before {
  opacity: 1;
}

.btn:active:not(:disabled) {
  transform: translateY(-1px) scale(1.02);
}

.btn:disabled {
  background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.abort-btn {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.abort-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}

.abort-btn::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.send-icon {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
}

.stop-icon {
  width: 14px;
  height: 14px;
  position: relative;
  z-index: 1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .input-container {
    padding: 16px 20px;
  }
  
  .input-wrapper {
    border-radius: 20px;
  }
  
  .input {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }
  
  .btn {
    width: 36px;
    height: 36px;
    border-radius: 18px;
  }
  
  .send-icon {
    width: 16px;
    height: 16px;
  }
  
  .loading-spinner {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .input-container {
    padding: 12px 16px;
  }
  
  .input-wrapper {
    padding: 3px;
  }
  
  .input {
    height: 40px;
    padding: 0 14px;
  }
  
  .btn {
    width: 34px;
    height: 34px;
    border-radius: 17px;
  }
}

/* 键盘弹起时的适配 */
@media (max-height: 500px) {
  .input-container {
    padding: 12px 16px;
  }
}
</style>